{% extends "Cart/base.html" %}

{% block title %}评价界面{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/Cart/1.css') }}">
    <link rel="stylesheet" href="../../static/layuimini/lib/layui-v2.6.3/css/layui.css">
    <script type="text/javascript" src="../../static/layuimini/lib/layui-v2.6.3/layui.js"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <style>
        #main{
            width: 950px;
            height: 440px;
            border: 1px solid gainsboro;
            margin: 20px auto;
        }
        .top{
            width: 950px;
            height: 37px;
            background-color: white;
            border-bottom: 2px solid #f40;
        }
        .pigjai{
            float: left;
            background-color: #f40;
            padding: 0 2.4em;
            margin: 0 .4em 0 0;
            text-align: center;
            color: #FFF;
            font-size: 1.4em;
            font-weight: 300;
            height: 35px;
            line-height: 35px;
        }
        .bodys{
            {#border: 1px solid green;#}
            border-bottom: 1px #DDD dashed;
            width: 950px;
            height: 320px;
            margin-top: 20px;
        }
        .zuo{
            width: 160px;
            height: 220px;
            float: left;
            padding: 14px 0 0 100px;
            {#border: 1px dashed plum;#}
        }
        .you{
            float: left;
            margin-left: 20px;
            width: 570px;
            {#border: 1px solid red;#}
            height: 270px;
        }
        #hello{
            padding-right: 20px;
            padding-top: 5px;
            float: left;
            font-size: 16px;
        }
        .write{
            padding: 8px;
            width: 544px;
            border: 1px solid #CCC;
            height: 150px;
            outline: 0;
            display: block;
            resize: vertical;
        }
        .fabiao{
            color: #fff;
            background-color: #3498db;
            width: 130px;
            height: 36px;
            border: none;
            box-shadow: inset 0 -2px 0 rgb(0 0 0 / 15%);
            border-radius: 4px;
            font-size: 13px;
            line-height: 1.385;
            padding: 9px 13px;
            text-align: center;
            margin-left: 400px;
            margin-top: 10px;
        }
        .zuo img{
            width: 110px;
            height: 130px;
        }
        .tag{
            width: 450px;
            margin-top: 5px;
        }
        .tag span{
            margin: 5px calc((100% - 70px * 5)/5/2);
            font-size: 13px;
            cursor: pointer;
        }
        .selected {
            background-color: deepskyblue;
        }
    </style>
{% endblock %}

{% block body %}
<!--返回首页-->
<div id="tui">
    <span id="sp11"><a style="text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a></span>&nbsp;/
    <span id="sp22"><a style="text-decoration: none;color: black" id="hello2" href="#">评价</a></span>
</div>
{# 评价界面 #}
<div id="main">
    <div class="top">
        <h3 class="pigjai">评价宝贝</h3>
    </div>
    <div class="bodys">
        <div class="zuo">
            <img src="../../static/image/detail/{{ orderitem['name'] }}.png">
            <div style="margin-top: 5px;color: #36c;">《{{ orderitem['name'] }}》</div>
            <div style="color: #999;margin-left: 6px">{{ orderitem['author'] }}&nbsp;&nbsp;著</div>
            <div style="color: #999;margin-left: 6px">{{ orderitem['type'] }}</div>
            <div style="display:none;" id="hiden">{{ orderitem['oid'] }}</div>
            <div style="display:none;" id="hiden2"></div>
        </div>
        <div class="you">
            <div>
                <div id="hello">图书质量</div>
                <div id="ID-rate-demo"></div>
            </div>
            <textarea id="write" class="write" placeholder="亲，写点评价吧，你的评价对其他买家有很大帮助的。"></textarea>
            <div class="tag">
                <span class="clickable-span">#包装仔细</span>
                <span class="clickable-span">#发货速度快</span>
                <span class="clickable-span">#品相不错</span>
                <span class="clickable-span">#物流很快</span>
                <span class="clickable-span">#非常满意</span>
            </div>
            <div class="tag">
                <span class="clickable-span">#价格实惠</span>
                <span class="clickable-span">#值得信赖</span>
                <span class="clickable-span">#物超所值</span>
                <span class="clickable-span">#服务态度好</span>
                <span class="clickable-span">#品相超预期</span>
            </div>
        </div>
    </div>
    <button id="fabiao" class="fabiao">发表评论</button>
</div>
    <script>
    let str="";
        // 获取所有可点击的span元素
        const clickableSpans = document.querySelectorAll('.clickable-span');
        // 存储黄色的span的数组
        const yellowSpans = [];
        // 给每个span元素添加点击事件的监听器
        clickableSpans.forEach(span => {
            span.addEventListener('click', () => {
                // 切换选中元素的状态
                span.classList.toggle('selected');
                // 检查span的选中状态并向数组中添加或移除已选中的元素
                if (span.classList.contains('selected') && !yellowSpans.includes(span)) {
                    yellowSpans.push(span);
                } else if (!span.classList.contains('selected') && yellowSpans.includes(span)) {
                    yellowSpans.splice(yellowSpans.indexOf(span), 1);
                }
            });
        });

        //评分功能
        layui.use(function(){
            var rate = layui.rate;
            // 渲染
            rate.render({
                elem: '#ID-rate-demo',
                text: true,
                value: 1,
                setText: function(value){ // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || ( value + "星"));
                },
                choose: function(value){
                    console.log(value); // 获得选中的评分值
                    document.getElementById("hiden2").innerText=value;
                }
            });
        });

        //点击发表评论按钮
        document.getElementById("fabiao").onclick=function () {
            console.log(document.getElementById("write").value);
            console.log(document.getElementById("hiden2").innerText);
            let x=yellowSpans.map(s => s.textContent);
            let str="";
            for(let i=0;i<x.length;i++){
                str+=x[i];
            }
            console.log(str);
            $.ajax({
                url:"/product/write/comment",
                data:{
                    'oid':document.getElementById("hiden").innerText,
                    'comment':document.getElementById("write").value,
                    'star':document.getElementById("hiden2").innerText,
                    'tags':str
                },
                success:function (res) {
                    if(res.state==200){
                        layer.msg(
                            res.msg,
                            {icon: 1,time:2000},
                            function () {
                                location.href="{{ url_for('product.showOrder') }}"
                            }
                        );
                    }
                }
            })
        }
    </script>
{% endblock %}